<template>
    <div class="Several">

        <div demo-bg style="display: flex;">
            <div id="Several1">
                <div>
                    <div class="select-wrapper">
                        <div class="select-header" @click="toggleDropdown">
                            {{ selectedLabel || placeholder }}
                            <span class="arrow" :class="{ open: isOpen }">▼</span>
                        </div>
                        <div v-if="isOpen" class="select-dropdown">
                            <div v-for="option in options" :key="option.value" class="select-item"
                                @click="selectOption(option)">
                                {{ option.label }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <dv-border-box10 class="DadaV">
                <div dv-bg>
                    <div id="Several2">
                        <div>
                            <p>累计税收</p>
                            <p><b id="b1">2325345.00</b></p>
                            <p>元</p>
                        </div>
                    </div>
                </div>
            </dv-border-box10>
            <dv-border-box10 class="DadaV">
                <div dv-bg>
                    <div id="Several3">
                        <div>
                            <p>累计车次</p>
                            <p><b id="b1">814617</b></p>
                            <p>车</p>
                        </div>
                    </div>
                </div>
            </dv-border-box10>
            <dv-border-box10 class="DadaV">
                <div dv-bg>
                    <div id="Several4">
                        <div>
                            <p>累计重量</p>
                            <p><b id="b1">917421.00</b></p>
                            <p>吨</p>
                        </div>
                    </div>
                </div>
            </dv-border-box10>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

interface Option {
    value: string;
    label: string;
}

const options = ref<Option[]>([
    {
        value: '岑溪市',
        label: '岑溪市',
    },
    {
        value: '岑溪市',
        label: '岑溪市',
    }
]);

const selectedValue = ref<string | null>(null);
const isOpen = ref(false);
const placeholder = '岑溪市';

const selectedLabel = computed(() => {
    const selected = options.value.find(option => option.value === selectedValue.value);
    return selected ? selected.label : null;
});

const toggleDropdown = () => {
    isOpen.value = !isOpen.value;
};

const selectOption = (option: Option) => {
    selectedValue.value = option.value;
    isOpen.value = false;
};

</script>

<style scoped lang="scss">
.Several {
    width: 100%;
    height: 15%;
    background-color: rgba(37, 74, 184, 0.3);
    display: flex;

    .DadaV {
        width: 360px;
        height: 170px;
        margin-right: 20px;
        font-size: 35px;
    }

    #Several1 {
        width: 330px;
        height: 170px;
        // border: #0c5084 solid 4px;
        margin-right: 30px;
        font-size: 40px;


    }

    #Several2 {
        width: 360px;
        height: 170px;
        border: #0c5084 solid 2px;
        margin-right: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        #b1 {
            font-size: 60px;
            color: #ff6316;
        }

    }

    #Several3 {
        width: 360px;
        height: 170px;
        border: #0c5084 solid 2px;
        margin-right: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        #b1 {
            font-size: 60px;
            color: #ffe400;
        }
    }

    #Several4 {
        width: 360px;
        height: 170px;
        border: #0c5084 solid 2px;
        margin-right: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        #b1 {
            font-size: 60px;
            color: #07e5ff;
        }
    }
}
.select-wrapper {
  position: relative;
  width: 220px;
  margin: 30px 60px;
}

.select-header {
  padding: 20px;
  height: 70px;
  border: 1px solid #ccc;
  background-color: rgba(37, 74, 184, 0.2);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.select-dropdown {
  position: absolute;
  width: 100%;
  border: 1px solid #ccc;
  border-top: none;
  background-color: #fff;
  z-index: 1000;
}

.select-item {
  padding: 10px;
 
  cursor: pointer;
}

.select-item:hover {
  background-color: #3624a8;
}

.arrow {
  transition: transform 0.3s;
}

.arrow.open {
  transform: rotate(180deg);
}
</style>
